<template>
  <el-dialog
    ref="dialogRef"
    draggable
    :append-to-body="true"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    class="avue-dialog avue-crud__dialog"
    :fullscreen="isFullScreen"
    v-model="visible"
    :title="title"
    v-bind="attrs"
    @close="handleClose"
  >
    <template #header>
      <div class="header avue-crud__dialog__header">
        <span class="el-dialog__title">
          <slot name="header">{{ title }}</slot>
        </span>
        <div class="avue-crud__dialog__menu">
          <el-icon
            size="14"
            v-if="isFullIcon"
            @click="isFullScreen = !isFullScreen"
          >
            <FullScreen  v-if="!isFullScreen"/>
            <CopyDocument v-else/>
          </el-icon>
        </div>
      </div>
    </template>
    <template #footer  v-if="!hideFooter">
      <slot name="footer" v-if="!hideFooter">
        <div class="dialog-footer avue-dialog__footer footer_box">
          <slot name="footer-left">
            <span></span>
          </slot>
          <slot name="footer-right">
            <div>
              <el-button
                type="primary"
                :icon="props.submitBtnIcon || 'Check'"
                v-if="props.showSubmitBtn"
                :loading="submitBtnLoading"
                @click="handleSubmit"
                >{{ submitBtnTxt }}</el-button
              >
              <el-button icon="Close" @click="handleCancel">{{ cancelBtnTxt }}</el-button>
            </div>
          </slot>
        </div>
      </slot>
    </template>
    <slot></slot>
  </el-dialog>
</template>

<script setup>
import fullScreenIcon from '@/assets/images/global/full_screen.svg'
import exitFullScreenIcon from '@/assets/images/global/exit_full_screen.svg'
// 是否全屏
const isFullScreen = ref(false)
const props = defineProps({
  title: {
    type: String,
    default: '弹窗标题',
  },
  submitBtnLoading: {
    type: Boolean,
    default: false,
  },
  submitBtnTxt: {
    type: String,
    default: '确定',
  },
  submitBtnIcon: {
    type: String,
    default: '',
  },
  cancelBtnTxt: {
    type: String,
    default: '取消',
  },
  isFullIcon: {
    type: Boolean,
    default: true,
  },
  // 是否点击确定自动关闭弹窗
  autoClose: {
    type: Boolean,
    default: false,
  },
  hideFooter: {
    type: Boolean,
    default: false,
  },
  showSubmitBtn: {
    type: Boolean,
    default: true,
  }
})
const attrs = useAttrs()
const emits = defineEmits(['submit', 'cancel','close'])
const visible = defineModel()
const dialogRef = ref()

const handleSubmit = () => {
  emits('submit')
  props.autoClose && (visible.value = false)
}

const handleCancel = () => {
  emits('cancel')
  visible.value = false
}
const handleClose = () => {
  emits('close')
  visible.value = false
}
</script>

<style lang="scss" scoped>
.footer_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
